<template>
  <div class="latest-music">
    <div class="top">
      <el-button
        round
        name="新歌速递"
        :class="{ selected: currentPage == '新歌速递' }"
        @click="handleTop('新歌速递')"
        >新歌速递</el-button
      >
      <el-button
        round
        name="新碟上架"
        :class="{ selected: currentPage == '新碟上架' }"
        @click="handleTop('新碟上架')"
        >新碟上架</el-button
      >
    </div>
    <div class="tag-nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="华语" name="7"></el-tab-pane>
        <el-tab-pane label="欧美" name="96"></el-tab-pane>
        <el-tab-pane label="韩国" name="16"></el-tab-pane>
        <el-tab-pane label="日本" name="8"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="song-list-wrap">
      <div>
        <el-table
          ref="singleTable"
          :data="newSongList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          :show-header="showHeader"
        >
          <el-table-column type="index" width="100"> </el-table-column>
          <el-table-column property="picture" label="图片" width="150">
            <template slot-scope="scope">
              <div>
                <!-- scope.row当前对象 -->
                <img
                  :src="
                    currentPage == '新歌速递'
                      ? scope.row.album.blurPicUrl
                      : scope.row.blurPicUrl
                  "
                  alt=""
                  style="width: 60px; height: 60px"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column property="name" label="歌曲名" width="200">
          </el-table-column>
          <el-table-column property="company" label="发行人" width="400">
            <template slot-scope="scope">
              <div>
                <!-- scope.row当前对象 -->
                <div>
                  {{
                    currentPage == "新歌速递"
                      ? scope.row.album.company
                      : scope.row.company
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="time" label="歌曲时长" width="200">
            <template slot-scope="scope">
              <div>
                <!-- scope.row当前对象 -->
                <div v-if="currentPage == '新歌速递'">
                  {{ scope.row.mMusic.playTime | dateFormat("M:S") }}
                </div>
                <div v-if="currentPage == '新碟上架'">
                  {{ scope.row.publishTime | dateFormat("Y-M-D") }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
	  <div class="foot"></div>
    </div>
    <Loading v-show="!success" />
  </div>
</template>

<script>
import { getSongsList, getAlbumsList } from "@/network/latestsong";
import { getUrl, getmpsDetails } from "@/network/play";
import { dateFormat } from "@/common/filter";
import Loading from "@/components/Loading";
import { mapMutations } from "vuex";
export default {
  name: "Latestmusic",
  data() {
    return {
      activeName: "0",
      currentPage: "新歌速递",
      newSongList: [],
      newAlbumList: [],
      showHeader: false,
      success: true,
    };
  },
  created() {
    this.getSongList(0);
  },
  methods: {
    handleTop(val) {
      this.newSongList = [];
      this.currentPage = val;
      this.activeName = "0";
      if (val == "新歌速递") {
        this.getSongList(0);
      } else {
        this.getAlbumList("ALL");
      }
    },
    // 表格方法
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      // this.currentRow = val;
      // console.log(val);
      this.handlePlay(val);
      this.getMp3Details(val.id);
      // this.getPlayTime(val.mMusic.playTime);
    },
    //标签方法
    handleClick(tab, event) {
      // console.log(tab.name);
      this.activeName = tab.name;
      this.newSongList = [];
      const currentTag = tab.name - 0;
      var area = "";
      switch (currentTag) {
        case 0:
          area = "ALL";
          break;
        case 7:
          area = "ZH";
          break;
        case 96:
          area = "EA";
          break;
        case 16:
          area = "KR";
          break;
        case 8:
          area = "JP";
          break;
      }
      if (this.currentPage == "新歌速递") {
        this.getSongList(currentTag);
      } else {
        this.getAlbumList(area);
      }
    },
    //获取新歌速递数据
    getSongList(type) {
      this.success = false;
      getSongsList("/top/song", { type: type }).then((res) => {
        this.newSongList = res.data.splice(0, 10);
        this.success = true;
        // console.log(this.newSongList);
      });
    },
    getAlbumList(area) {
      this.success = false;
      getAlbumsList("/top/album", {
        area: area,
        limit: 10,
      }).then((res) => {
        console.log(res.monthData.splice(0, 10));
        this.newSongList = res.monthData.splice(0, 10);
        this.success = true;
      });
    },
    //映射store中的mutations
    ...mapMutations(["getmp3Url",'getmusicDetails','getPlayTime']),
    //点击播放
    handlePlay(mp3Obj) {
      getUrl('/song/url',{
        id:mp3Obj.id
      }).then((res) => {
        console.log(res);
        this.getmp3Url(res.data[0].url);
      });
    },
    
    getMp3Details(ids){
      getmpsDetails('/song/detail',{
        ids
      }).then(res=>{
        console.log(res);
        this.getmusicDetails(res.songs[0]);
      })
    }
  },
  watch: {},
  filters: {
    dateFormat,
  },
  components: {
    Loading,
  },
};
</script>

<style scoped lang="less">
.latest-music {
	height: 600px;
	padding-bottom: 20px;
  .top {
    width: 300px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    .selected {
      background-color: skyblue;
      color: #fff;
    }
  }
  .song-list-wrap{
    div{
      .el-table{
        cursor: pointer;
      }
    }
	.foot{
		height: 80px;
	}
  }
}
</style>